<template>
  <div class="contain">
    <div class="content">
      <div class="title">
        <div class="left">
          <p>参与项目数统计</p>
          <img src="../assets/con2.png" alt="" />
        </div>
        <div class="right">
          <el-button @click="updateCharts('2021')" size="small">2021</el-button>
          <el-button @click="updateCharts('2022')" size="small">2022</el-button>
          <el-button @click="updateCharts('2023')" size="small">2023</el-button>
        </div>
      </div>
      <div class="image" ref="bar"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { reqBar3 } from '@/api/conn'
import { ref, onMounted, watch, reactive } from 'vue'
import useCounterStore from '@/stores/counter'

let bar = ref()
const chart = ref<any>(null)
let counterStore = useCounterStore()
interface CloudDate {
  [key: string]: {
    count: number[]
    name: string[]
    year: number
  }[]
}

let Mydata: CloudDate = reactive({})

let name = reactive([])
let count = reactive([])
const dataLoaded = ref(false)
onMounted(() => {
  fetchData()
})
watch(
  () => counterStore.province,
  () => {
    fetchData()
  }
)
const fetchData = async () => {
  const { province } = counterStore
  let result: any = await reqBar3(province)
  if (result.status == 200) {
    Mydata['2021'] = result.data[2021]
    Mydata['2022'] = result.data[2022]
    Mydata['2023'] = result.data[2023]
    if (!dataLoaded.value) {
      initCharts('2021')
      dataLoaded.value = true
    } else {
      updateCharts('2021')
    }
  } else console.log('404')
}

const initCharts = async (year: string) => {
  chart.value = echarts.init(bar.value)
  name = Mydata[year].name
  count = Mydata[year].count

  chart.value.setOption({
    textStyle: {
      color: 'white',
      fontWeight: 'bold'
    },
    tooltip: {
      trigger: 'axis'
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: name,
        axisLabel: {
          rotate: 90 // 旋转角度
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        data: count
      }
    ]
  })
}
const updateCharts = (year: string) => {
  if (!chart.value) return
  name = Mydata[year].name
  count = Mydata[year].count
  chart.value.setOption({
    xAxis: [
      {
        type: 'category',
        data: name
      }
    ],
    series: [
      {
        type: 'bar',
        data: count
      }
    ]
  })
}
</script>

<style scoped lang="scss">
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center; /* 水平居中内容 */
  .content {
    width: 90%; /* 盒子内容的宽度为盒子宽度的90% */
    background: url(../assets/con1.png) no-repeat;
    background-size: cover;
    background-position: center 10px;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 22px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        p {
          margin: 12px 0 0 0;
        }
      }
      .right {
        display: flex;
        align-items: center;
      }
    }
    .image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
